<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- <img 
        id="img"
        src="images/loading.gif"
        data-img="http://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201909/07/165009q5awmzmuuw3mum6b.jpg"> -->

    <div id="app">
        <img v-img="imgUrl">

        <img v-img.user="imgUrl" src="images/loading2.gif">
    </div>
</body>
<script>
    /*
     * 图片预加载
     * 目的：解决在网络环境较差的情况下，图片加载缓慢，图片位置会出现空白，提升用户体验
     * 概念：在图片下载完成之前使用一线很小的图片来代替，当图片下载完成后再指定显示，此时会直接从缓存中读取
     * 原理：使用js的Image对象动态创建图片，设置其src来实现预加载，再使用onload方法回调，当浏览器把图片下载到本地后，就可以使用src设置页面中的img显示图片
     */ 
    function preload(imgDom){
        let url=imgDom.getAttribute('data-img');
        let img = new Image(); // 创建一个img  Dom对象
        img.src=url; // 当为img标签指定src属性时会发送请求下载图片资源
        img.onload=function(){ // 当图片下载完成后
            imgDom.src=url; // 会从缓存中加载图片
        }
    } 

    // preload(document.getElementById('img'));

    Vue.directive('img',function(el,binding){
        if(!binding.modifiers.user){
            // 使用图片的base64编码，以代码的形式来表示图片
            el.src="";
        }

        let img = new Image();
        img.src=binding.value;
        img.onload=function(){
            el.src=binding.value;
        }
    });

    new Vue({
        el:'#app',
        data:{
            imgUrl:'http://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201909/07/165009q5awmzmuuw3mum6b.jpg'
        }
    });
</script>
</html>